<!--
* @description:操作员管理
* @fileName: OperatorManagement
* @author:孟帅龙
* @date:2021-1-12
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 操作员管理 -->
    <!-- 查询条件 -->
    <div class="czyselect">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="编号：">
          <el-input v-model="OperatorNumber" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="OperatorName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input
            v-model="OperatorPhone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select v-model="DeptId" placeholder="请选择部门">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.DeptName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="loadReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="goBack">新增</el-button>
          <el-button type="danger" @click="handleBatchDelete"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="czytable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="OperatorNumber" label="编号"> </el-table-column>
        <el-table-column prop="OperatorName" label="姓名"> </el-table-column>
        <el-table-column prop="CompanyName" label="公司名称"> </el-table-column>
        <el-table-column prop="OperatorPhone" label="手机号"> </el-table-column>
        <el-table-column prop="RoleName" label="角色名称"> </el-table-column>
        <el-table-column prop="DeptName" label="部门名称"> </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.CreateTime.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{scope.row.OperatorState==0?'可以操作':'不可以操作'}}
          </template>
          
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpdateCheck(scope.row)"
              :disabled="scope.row.OperatorState == 1"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              :disabled="scope.row.OperatorState == 1"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="handleCheck(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="czypage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <!-- 查看模态框 -->
    <el-dialog title="查看操作员信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="checkData">
        <el-form-item label="编号：" :label-width="formLabelWidth">
          {{ checkData.OperatorNumber }}
        </el-form-item>
        <el-form-item label="姓名：" :label-width="formLabelWidth">
          {{ checkData.OperatorName }}
        </el-form-item>
        <el-form-item label="公司名称：" :label-width="formLabelWidth">
          {{ checkData.CompanyName }}
        </el-form-item>
        <el-form-item label="手机号：" :label-width="formLabelWidth">
          {{ checkData.OperatorPhone }}
        </el-form-item>
        <el-form-item label="角色名称：" :label-width="formLabelWidth">
          {{ checkData.RoleName }}
        </el-form-item>
        <el-form-item label="创建时间：" :label-width="formLabelWidth">
          {{ checkData.CreateTime.substr(0, 10) }}
        </el-form-item>
        <el-form-item label="部门名称：" :label-width="formLabelWidth">
          {{ checkData.DeptName }}
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth">
          {{ checkData.OperatorState == 0 ? "可以操作" : "不可以操作" }}
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑模态框 -->
    <el-dialog title="编辑操作员信息" :visible.sync="dialogFormVisible">
      <el-form :model="checkData">
        <el-form-item label="编号：" :label-width="formLabelWidth">
          <el-input
            v-model="checkData.OperatorNumber"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：" :label-width="formLabelWidth">
          <el-input
            v-model="checkData.OperatorName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司名称：" :label-width="formLabelWidth">
          <el-select v-model="checkData.CpmpanyId" placeholder="请选择部门">
            <el-option
              v-for="item in company"
              :key="item.value"
              :label="item.CompanyName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号：" :label-width="formLabelWidth">
          <el-input
            v-model="checkData.OperatorPhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门名称：" :label-width="formLabelWidth">
          <el-select v-model="checkData.DeptId" placeholder="请选择部门">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.DeptName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配角色模态框 -->
    <!-- <el-dialog title="分配角色" :visible.sync="dialogVisible" width="30%">
      <el-tree
        :data="RoleTree"
        show-checkbox
        default-expand-all
        node-key="RoleNumber"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="loadAdd">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      OperatorNumber: "",
      OperatorName: "",
      OperatorPhone: "",
      pageindex: 1,
      pagesize: 3,
      DeptId: 0,
      totalcount: 0,
      multipleSelection: [],
      //全选非全选数组
      ids: [],
      //部门
      options: [],
      //公司
      company: [],
      //编辑模态框
      dialogFormVisible: false,
      checkData: {
        Id: "",
        OperatorNumber: "",
        OperatorName: "",
        CpmpanyId: "",
        OperatorPhone: "",
        CreateTime: "",
        OperatorState: "",
        Account: "",
        Password: "",
        IsDelete: "",
        AffirmPassword: "",
        DeptId: "",
      },
      formLabelWidth: "120px",

      //权限
      roleData: [],
      //角色菜单模态框
      dialogVisible: false,
      //树形控件的数组
      RoleTree: [],
      // defaultProps: {
      //   children: "ChildMenus",
      //   label: "RoleName",
      //   id: "RoleNumber",
      // },
      // RoleNumber: "",
      // role: [],
      // roles: [],
    };
  },
  methods: {
    //跳转添加页面
    goBack() {
      this.$router.push("/TheNewOperator");
    },
    // 时间格式化
    dataFormat(value) {
      var year = value.substr(0, 4);
      var month = value.substr(5, 2);
      var day = value.substr(8, 2);
      var hour = value.substr(11, 2);
      var min = value.substr(14, 2);
      var second = value.substr(17, 2);
      return (
        year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + second
      );
    },
    //查询显示分页
    loadData() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/operator/operator-page-show/" +
            this.DeptId,
          {
            params: {
              //1?OperatorNumber=1&OperatorName=1&OperatorPhone=1&pageindex=1&pagesize=3
              OperatorNumber: this.OperatorNumber,
              OperatorName: this.OperatorName,
              OperatorPhone: this.OperatorPhone,
              pageindex: this.pageindex,
              pagesize: this.pagesize,
            },
          }
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id);
      }
    },
    //重置
    loadReset() {
      this.OperatorNumber = "";
      this.OperatorName = "";
      this.DeptId = 0;
      this.OperatorPhone = "";
      this.loadData();
    },
    //部门显示
    loadDept() {
      this.$axios
        .get("https://localhost:44399/api/app/operator/department")
        .then((res) => {
          this.options = res.data;
          this.options.unshift({ Id: 0, DeptName: "全部" });
        });
    },
    //公司显示
    loadCompany() {
      this.$axios
        .get("https://localhost:44399/api/app/car/show-company")
        .then((res) => {
          this.company = res.data;
        });
    },
    //角色显示
    loadRoles() {
      this.$axios
        .get("https://localhost:44399/api/app/operator/role")
        .then((res) => {
          this.RoleTree = res.data;
        });
    },
    //编辑
    handleEdit() {
      this.$axios
        .put(
          "https://localhost:44399/api/app/operator/update-operator",
          this.checkData
        )
        .then((res) => {
          if (res.data.Code > 0) {
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //详情
    handleUpdateCheck(row) {
      this.dialogFormVisible = true;
      this.checkData = row;
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/operator/" + row.Id + "/operator"
            )
            .then((res) => {
              if (res.data.Code > 0) {
                this.$message.success("删除成功");
                this.loadData();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleBatchDelete() {
      if (this.ids.length == 0) {
        this.$message.warning("请至少选择一条操作的数据");
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/operator/batch-operator?ids=" +
                this.ids
            )
            .then((res) => {
              if (res.data.Code > 0) {
                this.$message.success("批量删除成功");
                this.loadData();
              } else {
                this.$message.error("批量删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    //权限配置详情
    handleCheck(row) {
      // this.dialogVisible = true;
      // this.OperatorNumber = id;
      // this.$axios
      //   .get(
      //     `https://localhost:44399/api/app/o-rRelation/by-oRRelation-id/${id}`).then((res) => {
      //    this.$refs.tree.setCheckedKeys([]);
      //   res.data.forEach(item=>{
      //    var node=this.$refs.tree.getNode(item.RoleId)
      //     if(node.isLeaf){
      //       this.$refs.tree.setChecked(node,true);
      //     }
      //   })
      //   });
      this.dialogVisible = true;
      this.checkData = row;
    },
    //权限配置添加
    loadAdd() {
      this.dialogVisible = false;
      this.role = this.$refs.tree.getCheckedKeys();
      this.roles = this.$refs.tree.getHalfCheckedKeys();
      this.$axios
        .post(
          `https://localhost:44399/api/app/o-rRelation/add-oRRelation?OperatorId=${
            this.OperatorNumber
          }&RoleId=${this.role.concat(this.roles.toString())}`
        )
        .then((res) => {
          if (res.data.Data > 0) {
            this.$message.success("权限分配成功");
          } else {
            this.$message.error("权限分配失败");
          }
        });
    },
  },
  created() {
    this.loadData();
    this.loadDept();
    this.loadCompany();
    this.loadRoles();
  },
};
</script>

<style>
.czyselect {
  margin: 10px;
}
.czytable {
  margin: 10px;
}
.czypage {
  margin: 10px;
}
</style>